<template>
  <j-modal
    :title="title"
    :width="780"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
      
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="案例类型">
         <j-dict-select-tag v-decorator="['caseType', {rules: [ { required: true, message: '请选择案例类型!' },]}]" 
         title="类型" :triggerChange=true dictCode="caseType"
           placeholder="请选择类型" @change="itemCaseTypeChanged"/>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="标题" >
          <a-input placeholder="请输入标题" v-decorator="['title', validatorRules.addinput]" />
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="封面">
          <j-image-upload text="上传" v-decorator="['logo', {}]" ></j-image-upload>
        </a-form-item>
        
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="车型" v-show="model.caseType!=3">
          <!-- <a-input placeholder="请输入车型" v-decorator="['type', validatorRules.addinput]" /> -->
          <!-- <j-dict-select-tag v-decorator="['type', { rules: [ { required: true, message: '请选择车型!' },] }]"
            title="车型" :triggerChange=true dictCode="carType" placeholder="请选择车型" /> -->
            <car-select disType="carType" v-decorator="['type', { rules: [ { required: true, message: '请选择车型!' },] }]" :triggerChange=true />
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="品牌">
          <a-input placeholder="请输入品牌（例如 膜品天下）" v-decorator="['brand', validatorRules.addinput]" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="产品">
          <!-- <a-input placeholder="请输入产品" v-decorator="['product', validatorRules.addinput]" /> -->
          <car-select v-if="model.caseType==2" disType="serialPpf" v-decorator="['product', { rules: [ { required: true, message: '请选择产品!' },] }]" :triggerChange=true />
          <car-select v-else disType="carColorSerial" v-decorator="['product', { rules: [ { required: true, message: '请选择产品!' },] }]" :triggerChange=true />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="颜色">
          <!-- <a-input placeholder="请输入颜色" v-decorator="['color', validatorRules.addinput]" /> -->
          <j-dict-select-tag v-decorator="['color', { rules: [
              { required: true, message: '请选择颜色!' },
              ] }]"  title="颜色" :triggerChange=true
           dictCode="carColorColor" placeholder="请选择颜色" />
        </a-form-item>
        <!-- <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="颜色" v-show="model.caseType!=1&&model.caseType!=3">
          <a-input placeholder="请输入颜色" v-decorator="['color', validatorRules.addinput]" />
        </a-form-item> -->
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="图片(多张)">
          <j-image-upload text="上传" v-decorator="['img', {}]" isMultiple ></j-image-upload>
        </a-form-item>
        
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="视频(mp4)">
          <j-upload text="上传" v-decorator="['video', {}]" ></j-upload>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="爆款">
         <j-dict-select-tag v-decorator="['isNew', { rules: [ { required: true, message: '请选择是否为爆款!' }] }]" 
           :triggerChange=true dictCode="isNew"
           placeholder="请选择类型"/>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="优先显示">
         <j-dict-select-tag v-decorator="['priorityDisplay', { rules: [ { required: true, message: '请选择是否优先显示!' }] }]" 
           :triggerChange=true dictCode="priorityDisplay"
           placeholder="请选择类型"/>
        </a-form-item>
        <!-- <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="岗位描述">
          <a-input placeholder="请输入岗位描述" v-decorator="['description', {}]" />
        </a-form-item> -->
      </a-form>
    </a-spin>
  </j-modal>
</template>

<script>
  import { httpAction } from '@/api/manage'
  import JImageUpload from '@/components/jeecg/JImageUpload'
  import pick from 'lodash.pick'
  import moment from "moment"
  import JUpload from '@/components/jeecg/JUpload'
  import CarSelect from '../../crm/comp/CarSelect.vue'
  import { filterDictTextByCache } from '@/components/dict/JDictSelectUtil'

  export default {
    name: "CarCaseModal",
    components: { JImageUpload,JUpload,CarSelect },
    data () {
      return {
        title:"操作",
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 },
        },

        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules:{
        addinput:{rules: [{ required: true, message: '请输入!' }]},
        addUser:{rules: [{ required: true, message: '请输入更新人!' }]},
        addTime:{rules: [{ required: true, message: '请输入添加时间!' }]},
        updateUser:{rules: [{ required: true, message: '请输入更新人!' }]},
        },
        url: {
          add: "/mpMini/carCase/add",
          edit: "/mpMini/carCase/edit",
          check: "/mpMini/carCase/mini/auditById"
        },
      }
    },
    created () {
     
    },
    methods: {
      add () {
        this.edit({'isNew':"0",'audit':"1",'priorityDisplay':"0"});
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'caseType','title','logo','type','product',
          'brand','color','isNew','priorityDisplay','img','video','description','audit','addUser','updateUser'))
          if(this.model.isNew==0||this.model.isNew=='否')
            this.model.caseType= 0;
          else if(this.model.isNew==1||this.model.isNew=='是')
            this.model.caseType= 1;
		  //时间格式化
          this.form.setFieldsValue({addTime:this.model.addTime?moment(this.model.addTime):null})
        });
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            let formData = Object.assign(this.model, values);

            if(formData.audit==="已审核")formData.audit = 1;
            else if(formData.audit==="未审核")formData.audit = 0;

            if(formData.isNew==="否"||formData.isNew == 0){
              formData.isNew = 0;
            }else if(formData.isNew==="是")formData.isNew = 1;

            if(formData.priorityDisplay==="否")formData.priorityDisplay = 0;
            else if(formData.priorityDisplay==="是")formData.priorityDisplay = 1;
            console.log('-----------------',formData)
            //时间格式化
            formData.addTime = formData.addTime?formData.addTime.format('YYYY-MM-DD HH:mm:ss'):null;
            
            httpAction(httpurl,formData,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })



          }
        })
      },
      handleCancel () {
        this.close()
      },

      handleChange(info) {
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
          this.$message.success(`${info.file.name} file uploaded successfully`);
        } else if (info.file.status === 'error') {
          this.$message.error(`${info.file.name} file upload failed.`);
        }
      },
      itemCaseTypeChanged(val){
        console.log(val);
        this.model.caseType=val;
      }
    }
  }
</script>

<style lang="less" scoped>

</style>